<template>
  <div>
    <el-card shadow="always" class="unifi-margin">
      <div ref="proportionEl" style="height: 250px"></div>
    </el-card>
    <el-card shadow="always" class="unifi-margin">
      <el-row>
        <el-col :span="12">
          <div ref="profitTypeEl" style="height: 300px;width: 100%"></div>
        </el-col>
        <el-col :span="12">
          <div ref="storesTypeEl" style="height: 300px;width: 100%"></div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import {getEchartsCount} from "@/api/finance/finance";
import request from "@/utils/request";
export default {
  name: 'index',
  data() {
    return {
      income: {
        proportionEl: undefined,
        profitTypeEl: undefined,
        storesTypeEl: undefined,
        valueArr: [],
        proportionOption: {
          backgroundColor: '#2c343c',
          title: {
            text: '财政收入',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#ccc'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '55%',
              center: ['25%', '50%'],
              data: [
                {value: 335, name: '平台租车收入'},
                {value: 310, name: '平台包车收入'},
                {value: 274, name: '录入租车收入'},
                {value: 235, name: '录入包车收入'},
                {value: 400, name: '其他收入'}
              ].sort(function (a, b) {
                return a.value - b.value;
              }),
              roseType: 'radius',
              label: {
                color: 'rgba(255, 255, 255, 0.3)'
              },
              labelLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              },
              itemStyle: {
                color: '#c23531',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200;
              }
            },
            {
              name: 'Access From',
              type: 'pie',
              radius: '55%',
              center: ['75%', '50%'],
              data: [
                {value: 335, name: '月湖公园'},
                {value: 310, name: '锦泰广场'},
              ].sort(function (a, b) {
                return a.value - b.value;
              }),
              roseType: 'radius',
              label: {
                color: 'rgba(255, 255, 255, 0.3)'
              },
              labelLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              },
              itemStyle: {
                color: '#ff8100',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200;
              }
            }
          ]
        },
        typeLineOption: {
          title: {
            text: '收入统计'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            itemWidth:10,
            data: ['平台租车收入', '平台包车收入', '录入租车收入', '录入包车收入', '其他收入']
          },
          grid: {
            left: '5%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            right: 0,
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '平台租车收入',
              type: 'line',
              stack: 'Total',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '平台包车收入',
              type: 'line',
              stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '录入租车收入',
              type: 'line',
              stack: 'Total',
              data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
              name: '录入包车收入',
              type: 'line',
              stack: 'Total',
              data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
              name: '其他收入',
              type: 'line',
              stack: 'Total',
              data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
          ]
        },
      }
    }
  },
  mounted() {
    this.initChart()
  }, methods: {
    initChart() {
      let store = ['月湖公园', '锦泰广场']
      let storeData = [{
        name: '月湖公园',
        type: 'line',
        stack: 'Total',
        data: [220, 232, 201, 234, 190, 330, 410]
      },
        {
          name: '锦泰广场',
          type: 'line',
          stack: 'Total',
          data: [320, 282, 291, 334, 390, 360, 390]
        },]
      let profitType = ['平台租车收入', '平台包车收入', '录入租车收入', '录入包车收入', '其他收入']

      let storePie = [
        {value: 335, name: '月湖公园'},
        {value: 310, name: '锦泰广场'},]
      let profitTypePie = [{value: 335, name: '平台租车收入'},
        {value: 310, name: '平台包车收入'},
        {value: 274, name: '录入租车收入'},
        {value: 235, name: '录入包车收入'},
        {value: 400, name: '其他收入'}]
      // let profitTypePie;
      // let storePie;
      getEchartsCount(this.queryParams).then(response => {
        // if (response) {
        //   profitTypePie = response.data.list;
        //   storePie = response.data.echartsCountByDept;
        //   profitType = response.data.descList;
        //   if (profitType != null && profitType.length > 0) {
        //     for (let profitTypeKey in profitType) {
        //       profitTypeKey
        //     }
        //   }
        // }
      });

      let profitTypeData = [{
        name: '平台租车收入',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '平台包车收入',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '录入租车收入',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: '录入包车收入',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: '其他收入',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }]

      this.income.proportionEl = this.$echarts.init(this.$refs.proportionEl)
      this.income.profitTypeEl = this.$echarts.init(this.$refs.profitTypeEl)
      this.income.storesTypeEl = this.$echarts.init(this.$refs.storesTypeEl)
      //收益占比图

      this.income.proportionOption.series[0].data = profitTypePie
      this.income.proportionOption.series[1].data = storePie
      this.income.proportionEl.setOption(this.income.proportionOption)
      this.$nextTick(() => {

        //收益日期折现图
        this.income.typeLineOption.legend.data = profitType
        this.income.typeLineOption.series = profitTypeData
        this.income.profitTypeEl.setOption(this.income.typeLineOption)
        //收益日期折现图
        this.income.typeLineOption.legend.data = store
        this.income.typeLineOption.series = storeData
        this.income.storesTypeEl.setOption(this.income.typeLineOption)

        // Handle the click event
        this.income.proportionEl.on('click', (params) => {
          this.$router.push('/finance/record');
        });
      })
    },
  }
}
</script>
<style scoped lang="scss">
.unifi-margin {
  margin: 8px;
}
</style>
